import React, { Component } from "react";
// import { connect } from "dva";

class NotFound extends Component {
    constructor(props) {
        super(props);
        this.setState = {};
    }

    render() {
        return (
            <div
                style={{
                    position: "relative",
                    display: "flex",
                    flexDirection: "column",
                    backgroundColor: "#ecede8",
                    alignItems: "center",
                    padding: "150px 12px"
                }}
            >
                <div
                    style={{
                        width: 1200,
                        marginTop: 60,
                        flex: 1,
                        display: "flex",
                        justifyContent: "center",
                        alignItems: "center",
                        flexDirection: "column"
                    }}
                >
                    <div
                        style={{
                            lineHeight: 2,
                            fontWeight: "700",
                            fontSize: 18
                        }}
                    >
                        您要找的页面不存在
                    </div>

                    <div> 可能是因为您的链接地址有误</div>

                    <div
                        style={{ width: 140, cursor: "pointer", marginTop: 10 }}
                    >
                        <Button
                            title={"返回首页"}
                            onClick={() => {
                                this.props.history.push({
                                    pathname: "/"
                                });
                            }}
                        />
                    </div>
                </div>
            </div>
        );
    }
}

class Button extends Component {
    render() {
        return (
            <div
                onClick={this.props.onClick}
                style={{
                    paddingLeft: 20,
                    paddingRight: 20,
                    display: "flex",
                    marginTop: 10
                }}
            >
                <div
                    style={{
                        flex: 1,
                        height: 40,
                        backgroundColor: "#00aeef",
                        borderRadius: 4,
                        display: "flex",
                        justifyContent: "center",
                        alignItems: "center"
                    }}
                >
                    <p style={{ color: "#fff", fontSize: 14 }}>
                        {this.props.title}
                    </p>
                </div>
            </div>
        );
    }
}

// export default connect((state)=>{return{home:state.home}})(NotFound);
export default NotFound;
